import React, { useEffect, useState } from 'react';
import { useLocation, useParams, useSearchParams } from 'react-router-dom';
import { vipbiaoqian_list, vipbiaoqian_search } from "../../../utils/vip/api"
import "../../../styles/Vipdetail.scss"
import { Button } from 'antd';
import pic from "../../../picture/vip.png"
import { useNavigate } from "react-router-dom"
function Vipdetail(props) {
    var [params, setParams] = useSearchParams()
    var [newId, setNewid] = useState(params.get('data'))
    var [data, setData] = useState([])

    var navigate = useNavigate()
    useEffect(() => {
        vipbiaoqian_search({ id_like: newId }).then((res) => {
            console.log(res.data);
            setData(res.data)
        })

    }, [])

    var back = () => {
        navigate('/index/equities/scorerole')
    }
    return (
        <div className='vipdetail'>
            <div className='text'>
                <span style={{ marginRight: "10px" }}>会员管理</span>/
                <span style={{ marginLeft: "10px" }}>标签详情</span>
                <h2 style={{ marginBottom: "20px" }}>标签详情</h2>
                <Button type='primary' onClick={back}>返回</Button>
            </div>
            <div className='detail_name'>
                {
                    data.map((item, index) => {

                        return (
                            <div className='detail' key={index} >
                                <div style={{ marginLeft: 200, marginTop: 20, width: 400 }} >
                                    <h3>标签名称：{item.name}</h3>
                                    <h3>会员数量：{item.num}</h3>
                                    <h3>标签类型：{item.type}</h3>
                                    <h3>标签条件：{item.condition}</h3>
                                    <h3>修改时间：{item.time}</h3>
                                </div>
                                <div>
                                    <img src={pic} alt="" />
                                </div>

                            </div>
                        )
                    })

                }
            </div>
        </div>
    );
}

export default Vipdetail;